<template>
  <div class="addposiman">
    <el-form ref="elForm" :model="formData" :rules="rules" size="medium" label-width="150px">
      <el-row :gutter="15">
        <el-col :span="24">
          <el-form-item label="请输入预置位名称:" prop="positionName">
            <el-input v-model="formData.positionName" placeholder clearable :style="{width: '100%'}" />
          </el-form-item>
        </el-col>
      </el-row>
      <el-row :gutter="15">
        <el-col :span="24">
          <div class="addposiman-btn">
            <el-button class="table-query" type="primary" @click="submitForm">保存</el-button>
            <el-button class="table-query" type="primary" @click="closed">取消</el-button>
          </div>
        </el-col>
      </el-row>
    </el-form>
  </div>
</template>

<script lang="ts">
import { Component, Prop, Vue, PropSync } from "vue-property-decorator";
import { publicAPIModule } from "@/store/modules/public";
interface optionList {
  value: string;
  label: string;
}
@Component
export default class addposiman extends Vue {
  @Prop({ default: () => {} })
  yzw!: { [key: string]: any };
  // 表单数据
  formData = {
    id: "",
    positionName: "",
  };
  // 验证数据
  rules = {
    positionName: [{ required: true, message: "请输入内容", trigger: "blur" }],
  };
  $refs!: {
    elForm: any;
  };
  mounted() {
    this.formData = {
      id: this.yzw.id,
      positionName: this.yzw.name,
    };
  }
    //创建
  closed(data=null) {
    this.$emit("closed",data);
  }
  // 修改预置位
  updatePosition() {
    let params = this.formData;
    (this as any).$services
      .updatePosition({ data: params, method: "put",postparams:true })
      .then((result: any) => {
          if (result.data === "修改成功") {
          this.closed(params.positionName);
          this.$message.success(result.data);
        } else {
          this.$message.warning(result.data);
        }
      })
      .catch((err: object) => {
          this.closed();
        console.log(err);
      });
  }
  // 表单提交
  submitForm() {
    let _this = this;
    this.$refs.elForm.validate((valid: any) => {
      if (valid) {
        _this.updatePosition();
      } else {
        this.$message({
          type: "warning",
          message: "表单校验不通过",
        });
        return;
      }
      // TODO 提交表单
    });
  }
}
</script>

<style lang="scss" scoped>
.addposiman {
  width: 100%;
  // height: 400px;
  &-btn {
    width: 100%;
    height: 0.5rem;
    display: flex;
    justify-content: center;
    align-items: center;
  }
}
</style>

